<template>
  <div>
    <h1>App组件</h1>
    <my-child title="props标题内容">
      <!-- 
        向默认插槽传标签内容
          直接指定要传递的标签内容
          <template v-slot:default>
          <template #default>
          <template>

       -->


      <p>这是一个默认的插槽内容</p>

      <!-- <template #mySlot> -->
      <template v-slot:mySlot>
        <p>这是一个具名插槽内容2</p>
      </template>

      <template v-slot:mySlot2>
        <p>这是一个具名插槽内容222222</p>
      </template>
    </my-child>

    <br>
    <br>
    <!-- 
      需求1: 已完成的文字是绿色的
      需求2: 每行都要带序号, 并且文字蓝绿切换
      需求3: ....

      都一个问题: 每行的样式是不确定的
     -->

    <todo-list :todos="todos">
      <!-- 
        使用v-slot接收子组件中slot标签的属性数据
        scope就是一个对象: 包含所有slot标签的属性
        {row, $index}
       -->
      <template v-slot="scope">
        <span :style="{color: scope.row.complete ? 'green' : 'black'}">{{scope.row.title}}</span>
      </template>
    </todo-list>

     <todo-list :todos="todos">
      <template v-slot="{row, $index}">
        <span :style="{color: $index%2==1 ? 'green' : 'blue'}">{{$index+1}}-----{{row.title}}</span>
      </template>
    </todo-list>
  </div>
</template>

<script>
import MyChild from './MyChild.vue'
import TodoList from './TodoList.vue'
export default {
  components: { MyChild, TodoList },
  name: 'App',

  data () {
    return {
      todos: [
        {id: 1, title: 'AAA', complete: true},
        {id: 2, title: 'BBB', complete: false},
        {id: 3, title: 'CCC', complete: true},
      ]
    }
  }
}
</script>

<style scoped>

</style>
